<template>
  <el-dialog width="400" :title="dialogTitle" v-model="dialogVisible" modal draggable @close="closeDialog"
    :close-on-click-modal="false">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="按月备份" name="month">
        <el-form class="dialog-form" ref="monthForm" :model="monthFormData" :rules="monthFormRules" label-width="100px"
          label-position="right">
          <el-form-item label="备份周期" prop="settingDay">
            <el-select v-model="monthFormData.settingDay" placeholder="请选择备份周期" class="full-width-input" clearable>
              <el-option v-for="(item, index) in dayOptions" :key="index" :label="item.label" :value="item.value"
                :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备份时间" prop="settingTime">
            <el-time-picker v-model="monthFormData.settingTime" format="HH:mm" value-format="HH:mm"
              placeholder="请选择备份时间">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="备份状态" prop="disabledFlag">
            <el-switch v-model="monthFormData.disabledFlag" active-color="#13ce66" :active-value="0"
              :inactive-value="1">
            </el-switch>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="按周备份" name="week">
        <el-form class="dialog-form" ref="weekForm" :model="weekFormData" :rules="weekFormRules" label-width="100px"
          label-position="right">
          <el-form-item label="备份周期" prop="settingWeekDay">
            <el-select v-model="weekFormData.settingWeekDay" placeholder="请选择备份周期" class="full-width-input" clearable>
              <el-option v-for="(item, index) in weekOptions" :key="index" :label="item.label" :value="item.value"
                :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备份时间" prop="settingTime">
            <el-time-picker v-model="weekFormData.settingTime" format="HH:mm" value-format="HH:mm"
              placeholder="请选择备份时间">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="备份状态" prop="disabledFlag">
            <el-switch v-model="weekFormData.disabledFlag" active-color="#13ce66" :active-value="0" :inactive-value="1">
            </el-switch>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="按天备份" name="day">
        <el-form class="dialog-form" ref="dayForm" :model="dayFormData" :rules="dayFormRules" label-width="100px"
          label-position="right">
          <el-form-item label="备份时间" prop="settingTime">
            <el-time-picker v-model="dayFormData.settingTime" format="HH:mm" value-format="HH:mm" placeholder="请选择备份时间">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="备份状态" prop="disabledFlag">
            <el-switch v-model="dayFormData.disabledFlag" active-color="#13ce66" :active-value="0" :inactive-value="1">
            </el-switch>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog" size="mini">关 闭</el-button>
      <el-button type="primary" @click="submitForm" size="mini">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getSetting, update } from '@/api/sys/backups'
import moment from 'moment/moment'
export default {
  name: 'backupSettingDialog',
  data() {
    return {
      activeName: 'month',
      type: '',
      dialogTitle: '备份设置',
      dialogVisible: false,
      monthFormData: {},
      monthFormRules: {
        settingDay: [{ required: true, message: '请选择备份周期', trigger: 'change' }],
        settingTime: [{ required: true, message: '请选择备份时间', trigger: 'blur' }],
      },
      dayOptions: [],
      weekFormData: {},
      weekFormRules: {
        settingWeekDay: [{ required: true, message: '请选择备份周期', trigger: 'change' }],
        settingTime: [{ required: true, message: '请选择备份时间', trigger: 'blur' }],
      },
      weekOptions: [
        {
          label: '星期一',
          value: '1',
        },
        {
          label: '星期二',
          value: '2',
        },
        {
          label: '星期三',
          value: '3',
        },
        {
          label: '星期四',
          value: '4',
        },
        {
          label: '星期五',
          value: '5',
        },
        {
          label: '星期六',
          value: '6',
        },
        {
          label: '星期天',
          value: '7',
        },
      ],
      dayFormData: {},
      dayFormRules: {
        settingTime: [{ required: true, message: '请选择备份时间', trigger: 'blur' }],
      },
    }
  },
  methods: {
    // dayOptions添加数据label为某日，value为某日
    getDays() {
      for (let i = 1; i <= 31; i++) {
        this.dayOptions.push({
          label: i + '日',
          value: i.toString(),
        })
      }
    },
    handleClick(tab, event) {
      if (tab.name === 'month') {
        getSetting(1)
          .then((res) => {
            if (res.data.code === 200) {
              this.monthFormData = res.data.data
              this.$set(
                this.monthFormData,
                'settingTime',
                res.data.data.settingHour + ':' + res.data.data.settingMinute
              )
            } else {
              this.$message.warning(res.data.message)
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
      } else if (tab.name === 'week') {
        getSetting(2)
          .then((res) => {
            if (res.data.code === 200) {
              this.weekFormData = res.data.data
              this.$set(
                this.weekFormData,
                'settingTime',
                res.data.data.settingHour + ':' + res.data.data.settingMinute
              )
            } else {
              this.$message.warning(res.data.message)
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
      } else if (tab.name === 'day') {
        getSetting(3)
          .then((res) => {
            if (res.data.code === 200) {
              this.dayFormData = res.data.data
              this.$set(
                this.dayFormData,
                'settingTime',
                res.data.data.settingHour + ':' + res.data.data.settingMinute
              )
            } else {
              this.$message.warning(res.data.message)
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
      }
    },
    edit() {
      this.activeName = 'month'
      this.dayOptions = []
      this.getDays()
      getSetting(1)
        .then((res) => {
          if (res.data.code === 200) {
            this.monthFormData = res.data.data
            this.$set(
              this.monthFormData,
              'settingTime',
              res.data.data.settingHour + ':' + res.data.data.settingMinute
            )
            this.dialogVisible = true
          } else {
            this.$message.warning(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    submitForm() {
      if (this.activeName === 'month') {
        this.$refs['monthForm'].validate((valid) => {
          if (valid) {
            this.monthFormData.settingHour = moment(this.monthFormData.settingTime, 'HH:mm').format(
              'HH'
            )
            this.monthFormData.settingMinute = moment(
              this.monthFormData.settingTime,
              'HH:mm'
            ).format('mm')
            update(this.monthFormData)
              .then((res) => {
                if (res.data.code === 200) {
                  this.$message.success('设置成功')
                } else {
                  this.$message.warning(res.data.message)
                }
              })
              .catch((err) => {
                this.$message.error(err)
              })
          }
        })
      } else if (this.activeName === 'week') {
        this.$refs['weekForm'].validate((valid) => {
          if (valid) {
            this.weekFormData.settingHour = moment(this.weekFormData.settingTime, 'HH:mm').format(
              'HH'
            )
            this.weekFormData.settingMinute = moment(this.weekFormData.settingTime, 'HH:mm').format(
              'mm'
            )
            update(this.weekFormData)
              .then((res) => {
                if (res.data.code === 200) {
                  this.$message.success('设置成功')
                } else {
                  this.$message.warning(res.data.message)
                }
              })
              .catch((err) => {
                this.$message.error(err)
              })
          }
        })
      } else if (this.activeName === 'day') {
        this.$refs['dayForm'].validate((valid) => {
          if (valid) {
            this.dayFormData.settingHour = moment(this.dayFormData.settingTime, 'HH:mm').format(
              'HH'
            )
            this.dayFormData.settingMinute = moment(this.dayFormData.settingTime, 'HH:mm').format(
              'mm'
            )
            update(this.dayFormData)
              .then((res) => {
                if (res.data.code === 200) {
                  this.$message.success('设置成功')
                } else {
                  this.$message.warning(res.data.message)
                }
              })
              .catch((err) => {
                this.$message.error(err)
              })
          }
        })
      }
    },
    closeDialog() {
      this.$refs['monthForm'].resetFields()
      this.$refs['weekForm'].resetFields()
      this.$refs['dayForm'].resetFields()
      this.dialogVisible = false
    },
  },
}
</script>

<style scoped></style>
